<template>
    <div class="row row--15 service-wrapper">
        <div class="col-lg-3 col-md-6 col-sm-6 col-12"
             v-for="(service, index) in serviceList"
             :key=index>
            <div :class="`service ${serviceStyle} ${checkTextAlign}`"
                 data-aos="fade-up"
                 data-aos-delay="70">
                <div class="icon">
                    <div class="line"/>
                    {{ service.icon }}
                </div>
                <div class="content">
                    <h4 class="title" v-html="service.title">
                    </h4>
                    <p class="description b1 color-gray mb--0" v-html="service.description" style="font-size: 16px;"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ServiceFour',
        props: {
            serviceStyle: {
                type: String
            },
            textAlign: {
                type: String,
                default: 'left'
            }
        },
        data() {
            return {
                serviceList: [
                    {
                        icon: '1',
                        title: '采用隐私计算',
                        description: '采用隐私计算确保用户信息安全,快速抵达200+国家或地区的本地运营商,体验低延迟、高触达、广连接的全球通讯交互'
                    },
                    {
                        icon: '2',
                        title: '价格优惠',
                        description: '行业内领先技术数据实用且价格优惠,使用国际统一的API轻松集成到您的系统或业务流程中,并支持国际通用协议接入'
                    },
                    {
                        icon: '3',
                        title: 'API调用加速',
                        description: '采用领先加速科技,可视化埋点全方位追踪转化数据,发送数据自动汇总简易明了,数据模块助力分析调整策略,实时数据统计'
                    },
                    {
                        icon: '4',
                        title: '响应快速',
                        description: '  毫秒级别响应,接口校验认证安全可靠,短信及语音推广到达率高,支持针对不同需求出具针对性通信解决方案'
                    }
                ]
            }
        },
        computed: {
            checkTextAlign() {
                if (this.textAlign === 'left') return 'text-start';
                else if (this.textAlign === 'center') return 'text-center';
                else if (this.textAlign === 'end') return 'text-end';
                else return '';
            }
        }
    }
</script>